<template>
  <transition name="slide">
    <div class="active-signup">
      <page-header title="活动报名"></page-header>
      <scroll class="signup-content" ref="signupScroll">
        <div>
          <div class="signup-info">
            <div class="pic"><img :src="data.img"></div>
            <div class="text">
              <p>{{data.title}}</p>
              <p>{{data.pricename}}</p>
              <p class="price">{{data.price}}</p>
            </div>
          </div>
          <ul class="signup-detail">
            <li>
              <span>课程时长</span>
              <p>{{data.time}}</p>
            </li>
            <li>
              <span>课程日期</span>
              <p>{{data.date}}</p>
            </li>
            <li>
              <span>出发时间</span>
              <div >
                <p v-for="(item, index) in data.departList" :key="index">
                  <input type="radio" name="departtime" v-model="data.departtime" :value="item">{{item}}
                </p>
              </div>
            </li>
            <li>
              <span>数量</span>
              <div class="counter">
                <div @click="_minus">-</div>
                <div>{{data.numb}}</div>
                <div @click="_plus">+</div>
              </div>
            </li>
          </ul>
          <ul class="signup-detail">
            <li @click="memberEdit">
              <span>填写成员资料</span>
              <div><p>已填写{{memberData.length}}份，共{{data.numb}}份</p></div>
            </li>
          </ul>
          <div class="agreement">
            <i :class="{'active': agreement}" @click="agreement = !agreement"></i>
            <p>我已阅读并同意</p>
            <span @click="_turnAgreement">《服务协议》</span></div>
          <div class="logo-wrapper">
            <img src="../../assets/image/logo_2.png" alt="">
            <p>科教链</p>
          </div>
        </div>
      </scroll>
      <ul class="buy">
        <div class="price">实付金额：<span>¥{{ parseFloat(data.price) * numb }}</span></div>
        <div class="submit" :class="{'noAgree': !agreement}" @click="_submit">提交订单</div>
      </ul>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import Scroll from 'components/scroll/scroll'
import * as exampleApi from 'api/example'
import { commonOption } from 'api/config'
export default {
  components: {
    PageHeader,
    Scroll
  },
  data () {
    return {
      type: '',
      id: '',
      numb: 0,
      agreement: true,
      data: {},
      classid: '',
      memberData: []
    }
  },
  created() {
    this.type = this.$route.name
    this.id = this.$route.params.id
    this.classid = this.$route.params.classid
  },
  mounted() {
    this._initData()
  },
  methods: {
    _initData() {
      if (this.$route.query.data) {
        this.data = this.$route.query.data
        this.memberData = this.$route.query.memberData
        this.$refs.signupScroll.refresh()
      } else {
        exampleApi.modePost('/busine/activity/detail', {
          id: this.id
        }).then(res => {
          let activity = res.data.data
          exampleApi.modePost('/busine/price/detail', {
            id: this.classid
          }).then(priceRes => {
            let price = priceRes.data.data
            let pricemoney = price.money
            if (new Date() < activity.discounttime) {
              pricemoney = pricemoney - activity.discountmoney
            }
            // mock 数据
            let response = {
              id: activity.id,
              title: activity.name,
              date: this.getDate(activity.applyendtime) + ' - ' + this.getDate(activity.departendtime),
              time: activity.time,
              img: commonOption.host + '/' + activity.cover.split('@')[0],
              priceid: price.id,
              pricename: price.name,
              price: pricemoney,
              departList: activity.departtime.split(','),
              departtime: activity.departtime.split(',')[0],
              numb: 1
            }
            this.data = response
            this.$refs.signupScroll.refresh()
          })
        })
      }
    },
    _minus() {
      if (this.data.numb <= 1) {
        return
      }
      this.data.numb --
    },
    _plus() {
      this.data.numb ++
    },
    _submit() {
      if (this.memberData.length < this.data.numb) {
        alert('请完善成员资料')
        return
      }
      let data = {
        id: this.data.id,
        num: this.data.numb
      }
      console.log('报名', data)
//      exampleApi.modePost('/weixin/getMember', {
//        redirect_uri: 'http://localhost:8083/#/personal/activity/signup/10/328',
//        appId: 'wx034a7078908984ac',
//        state: ''
//      })
    },
    _turnAgreement() {
      if (!this.agreement) {
        return
      }
      console.log('跳转协议')
    },
    getDate (date) {
      let myDate
      if (date instanceof Date) {
        myDate = date
      } else if (typeof (date) === 'number') {
        myDate = new Date(date)
      } else {
        return date
      }

      let Y = myDate.getFullYear()
      let M = myDate.getMonth() + 1
      let D = myDate.getDate()

      if (M < 10) {
        M = '0' + M
      }
      if (D < 10) {
        D = '0' + D
      }
      return Y + '年' + M + '月' + D + '日'
    },
    memberEdit () {
      this.data.memberid = '1'
      this.data.id = this.id
      this.data.classid = this.classid
      let data = this.data
      let query = {
        data: data,
        memberData: this.memberData
      }
      this.$router.push({
        path: `/personal/activity/member/${data.memberid}`,
        query: query
      })
    }
  }
}
</script>

<style lang="less" scoped>
.slide-enter-active,.slider-leave-active {
  transition: all 0.3s
}
.slide-enter,.slide-leave-to {
  transform: translate3d(100%, 0, 0)
}
.active-signup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
  background-color: #e6e6e6;
  z-index: 992;
  .signup-content{
    height:calc(~"100% - 164px");
    overflow: hidden;
    .signup-info{
      width:100%;
      height: 205px;
      background-color: #ffffff;
      display:flex;
      box-sizing:border-box;
      padding: 28px 20px;
      .pic{
        flex: 0 0 220px;
        width: 220px;
        height: 100%;
        overflow:hidden;
        box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        img{
          width: 100%;
          height: auto;
        }
      }
      .text{
        padding-left: 25px;
        display:flex;
        flex-direction:column;
        justify-content: space-around;
        p{
          font-size: 30px;
          color: #333333;
        }
        .price{
          font-size: 34px;
          color: #ee4941;
          &::before {
            display: inline-block;
            vertical-align: text-top;
            content: '';
            width: 36px;
            height: 36px;
            margin-right: 10px;
            background: url('../../assets/image/icon_price.png') no-repeat center / 36px;
          }
        }
      }
    }
    .signup-detail{
      margin-top: 20px;
      width: 100%;
      padding:0 20px;
      box-sizing: border-box;
      background-color: #fff;
      li{
        height:80px;
        box-sizing: border-box;
        border-bottom: 1px solid #cccccc;
        display:flex;
        justify-content:space-between;
        align-items: center;
        &:nth-last-child(1) {
          border:none;
        }
        &:nth-child(2) {
          span::before{
            background-image: url('../../assets/image/icon_sign_2.png')
          }
        }
        &:nth-child(3) {
          span::before{
            background-image: url('../../assets/image/icon_sign_3.png')
          }
        }
        span{
          font-size: 28px;
          color: #333333;
          &::before{
            display: inline-block;
            margin-right: 14px;
            vertical-align: text-bottom;
            content: '';
            width: 34px;
            height: 26px;
            background: url('../../assets/image/icon_sign_1.png') no-repeat center center / auto 26px;
          }
        }
        p{
          font-size: 26px;
          color: #999999;
        }
        .counter{
          display:flex;
          div{
            width: 50px;
            height: 50px;
            border: 1px solid #cccccc;
            font-size: 26px;
            line-height: 50px;
            text-align: center;
            color: #999999;
          }
          div:nth-child(2) {
            width: 84px;
            border-left: none;
            border-right: none;
            color: #19ce29;
          }
        }
      }
    }
    .agreement{
      margin-top: 20px;
      height: 80px;
      background-color: #ffffff;
      display:flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 25px;
      p{
        font-size: 22px;
        color: #999999;
      }
      i{
        width: 24px;
        height: 24px;
        border-radius: 4px;
        box-sizing:border-box;
        border: solid 1px #cccccc;
        margin-right: 14px;
        &.active {
          background-color: #4788f4;
          border-color: #4788f4;
        }
      }
      span{
        font-size: 22px;
        color: #4788f4;
      }
    }
    .logo-wrapper{
      width: 100%;
      height: 164px;
      background-color: #e5e5e5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      p{
        font-size: 20px;
        color: #cccccc;
        margin-top: 15px;
      }
      img{
        width: 43px;
        height: 43px;
      }
    }
  }
  .buy{
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    .submit{
      width: 342px;
      flex: 0 0 342px;
      background-color: #ee4941;
      font-size: 28px;
      line-height: 80px;
      color: #ffffff;
      text-align: center;
    }
    .submit.noAgree{
      background-color: #ddd;
    }
    .price{
      flex: 1;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20px;
      font-size: 24px;
      color: #666666;
      span{
        font-size: 30px;
        color: #ee4941;
      }
    }
  }
}
</style>
